<template>
    <view class="page" :style="{ '--color': color }">
        <status-bar :title="config.title"></status-bar>
        <view class="filterArea bgwhite" :style="{ top: totalHeight + 'px' }">
            <scroll-view class="scroll-row" scroll-x :scroll-into-view="'view' + date" scroll-with-animation>
                <view
                    :id="'view' + item.scanData"
                    class="date m-right10"
                    :class="{ thmeBg: date == item.scanData, 'm-right110': index == dateList.length - 1 }"
                    v-for="(item, index) in dateList"
                    :key="index"
                    @click="handleQuery({ date: item.scanData })"
                >
                    <view class="size28" :class="date == item.scanData ? 'white' : 'color_33'">{{ item.w }}</view>
                    <view class="h6" :class="date == item.scanData ? 'white' : 'color_99'">{{ item.title }}</view>
                </view>
            </scroll-view>
            <scroll-view class="scroll-row m-top40" scroll-x>
                <view class="type color_66" :class="{ active: id == item.id }" @click="handleQuery({ id: item.id })" v-for="(item, index) in typeList" :key="index">{{ item.name }}</view>
            </scroll-view>
            <view class="calendar bgwhite p-ab" @click="showCalendar = true">
                <text class="iconfont icon-qiandao size36 color_99"></text>
                <view class="h6 color_99">选择</view>
            </view>
        </view>
        <view class="padding24 m-top200">
            <view class="card" @click="toDetail(item)" v-for="(item, index) in list" :key="index">
                <image class="img" :src="$imgUrls(item.img)" mode="aspectFill"></image>
                <view class="flex-1 p-left20">
                    <view class="info">
                        <view class="size28 color_33 bold ellipsis_2">{{ item.name }}</view>
                        <view class="row a-center m-top10" v-if="item.timeLabel">
                            <block v-for="(subItem, subIndex) in item.timeLabel" :key="subIndex">
                                <view class="h6 color_66">{{ subItem }}</view>
                                <view class="divider" v-if="subIndex < item.timeLabel.length - 1"></view>
                            </block>
                        </view>
                    </view>
                    <view class="d-flex a-end">
                        <view class="flex-1">
                            <text class="h6 thmeColor bold">￥</text>
                            <text class="size34 thmeColor bold">{{ parseFloat(item.price) }}</text>
                            <text class="h6 color_B3 line-through m-left4" v-if="parseFloat(item.full_price) > parseFloat(item.price)">￥{{ parseFloat(item.full_price) }}</text>
                        </view>
                        <view class="btn flexac thmeBg size28 white" v-if="item.status == 1">预约</view>
                        <view class="btn flexac size28 white" v-else>已约满</view>
                    </view>
                </view>
            </view>

            <empty cat="4" v-if="noData" msg="暂未开放预约档期哦~"></empty>
        </view>

        <view class="float-nav" @click.stop="$common.Tel(config.phone)" v-if="config.phone">
            <view class="item bgwhite bor_radius flexac">
                <text class="iconfont icon-dianhua size42 thmeColor"></text>
            </view>
        </view>

        <u-calendar
            :show="showCalendar"
            mode="single"
            :showTitle="false"
            :color="color"
            :customList="customList"
            :defaultDate="date"
            closeOnClickOverlay
            @close="showCalendar = false"
            @confirm="confirm"
        ></u-calendar>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                config: '',
                dateList: [],
                date: '', // 日期
                customList: [],
                typeList: [],
                id: 'all', // 分类id
                list: [],
                page: 1,
                limit: 10,
                noData: false,
                noMore: false,
                showCalendar: false,
                showModal: false,
                tmplIds: []
            };
        },
        computed: {
            ...mapState(['color', 'totalHeight', 'vid'])
        },
        onLoad() {
            this.getConfig();
        },
        methods: {
            getConfig() {
                this.$http
                    .post({
                        url: '/goodsSubscribeApi/getConfig'
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        if (res.template_id) this.tmplIds.push(res.template_id);
                        console.log(this.tmplIds, 'this.tmplIds');
                        this.config = res.data.config || '';
                        this.dateList = res.data.date || [];
                        this.typeList = res.data.classify || [];
                        if (this.dateList.length) this.date = this.dateList[0].scanData;
                        this.customList = this.dateList.map((item) => item.scanData);
                        this.getList();
                    });
            },
            getList() {
                this.$showLoading('');
                this.noData = false;
                this.noMore = false;
                this.$http
                    .post({
                        url: '/goodsSubscribeApi/getGoodsList',
                        data: {
                            date: this.date,
                            id: this.id,
                            page: this.page,
                            limit: this.limit
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        let result = res.data || [];
                        this.list = this.page == 1 ? result : this.list.concat(result);
                        if (!this.list.length) this.noData = true;
                        if (result.length < this.limit) this.noMore = true;
                    });
            },
            handleQuery(item) {
                if (item.date) this.date = item.date;
                if (item.id) this.id = item.id;
                this.page = 1;
                this.getList();
            },
            confirm(e) {
                this.date = e[0];
                this.page = 1;
                this.getList();
                this.showCalendar = false;
            },
            toDetail(item) {
                if (!this.vid) return (this.showModal = true);
                if (this.tmplIds.length) {
                    uni.requestSubscribeMessage({
                        tmplIds: this.tmplIds,
                        succes: (res) => {
                            console.log(res, 'res');
                        },
                        fail: (err) => {
                            console.log(err, 'err');
                        },
                        complete: () => {
                            this.toUrl('/orderPage/order/submitReserve?goods_id=' + item.goods_id + '&scanDate=' + this.date);
                        }
                    });
                } else {
                    this.toUrl('/orderPage/order/submitReserve?goods_id=' + item.goods_id + '&scanDate=' + this.date);
                }
            }
        },
        onReachBottom() {
            if (this.noMore) return;
            this.page++;
            this.getList();
        }
    };
</script>

<style lang="scss" scoped>
    .page {
        background-color: #f5f5f5;
    }
    .filterArea {
        width: 100%;
        height: 200rpx;
        position: fixed;
        left: 0;
        z-index: 1;
        padding: 0 24rpx;
    }
    .date {
        display: inline-block;
        text-align: center;
        padding: 10rpx 12rpx;
        border-radius: 10rpx;
    }
    .type {
        display: inline-block;
        padding: 8rpx 24rpx;
        background: #f7f7f7;
        border-radius: 4rpx;
        margin-right: 24rpx;
        &.active {
            background: #ededed;
            color: var(--color);
            font-weight: bold;
        }
    }
    .calendar {
        width: 108rpx;
        padding: 10rpx 0;
        text-align: center;
        box-shadow: -4px 0px 4px rgba(0, 0, 0, 0.06);
        right: 0;
        top: 0;
    }
    .card {
        background: #fff;
        border-radius: 10rpx;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
        padding: 24rpx;
        margin-bottom: 24rpx;
        display: flex;
        .img {
            width: 170rpx;
            height: 170rpx;
            border-radius: 10rpx;
        }
        .info {
            min-height: 116rpx;
        }
        .divider {
            width: 2rpx;
            height: 24rpx;
            background: #eaeaec;
            margin: 0 10rpx;
        }
        .btn {
            width: 130rpx;
            height: 54rpx;
            background: #e6e6e6;
            border-radius: 30rpx;
        }
    }
    .float-nav {
        position: fixed;
        right: 20rpx;
        bottom: calc(200rpx + constant(safe-area-inset-bottom));
        bottom: calc(200rpx + env(safe-area-inset-bottom));
        z-index: 1;
        .item {
            width: 80rpx;
            height: 80rpx;
            box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.16);
        }
    }
</style>
